<!--
 * @Description: nbd developer
 * @Author: wukai
 * @CompanyWebsite: nbd.com.cn
 * @since: 2022-04-25 14:40:25
 * @LastAuthor: wukai
 * @lastTime: 2023-06-26 14:45:54
-->
<template>
    <a-modal
        v-model:visible="createVideoVisible"
        :width="1280"
        class="motalsGroupBox"
        title="制作视频"
        :maskClosable="false"
        :footer="null"
        v-if="createVideoVisible"
        @cancel="showEditCancel"
    >
        <div class="motalContent1">
            <div class="rowItem acter">
                <div class="leftItem"><span>*</span> 制作视频：</div>
                <div class="rightItem">
                    <div
                        class="items"
                        :class="subMsg.type == 1 ? 'itemsed' : ''"
                        @click="choosed('1')"
                    >
                        <img
                            :src="subMsg.type == 1 ? checked : uncheck"
                            alt=""
                        />
                        <span>单独制作</span>
                    </div>
                    <div
                        class="items"
                        :class="subMsg.type == 2 ? 'itemsed' : ''"
                        @click="choosed('2')"
                    >
                        <img
                            :src="subMsg.type == 2 ? checked : uncheck"
                            alt=""
                        />
                        <span>合并制作</span>
                    </div>
                </div>
            </div>

            <div class="rowItem acter">
                <div class="leftItem"><span>*</span> 视频标题：</div>
                <div class="rightItem">
                    <a-input
                        class="inputs"
                        v-model:value="subMsg.title"
                        placeholder="请输入视频标题"
                        show-count
                        :maxlength="50"
                    />
                </div>
            </div>
            <div class="rowItem">
                <div class="leftItem"><span>*</span> 模版列表：</div>
                <perfect-scrollbar>
                    <div class="rightItem motalContent">
                        <div
                            v-for="(item, index) in motalList"
                            :key="index"
                            class="item"
                            :class="
                                selectedNum.includes(item.id)
                                    ? 'itemSelected'
                                    : ''
                            "
                            @click="chooseVideo(item)"
                        >
                            <img
                                class="imgIcon"
                                :src="item.tplShowImg"
                                alt=""
                            />
                            <span class="titlesd">{{ item.name }}</span>
                            <img
                                src="../../assets/img/linkvideo/xuanz.png"
                                alt=""
                                v-show="selectedNum.includes(item.id)"
                                class="seletced"
                            />
                            <!-- <img class="bianjiBox" @click.stop="changeName(item)" src="../assets/img/linkvideo/edit_name.png" alt="" /> -->
                        </div>
                    </div>
                </perfect-scrollbar>
            </div>
        </div>
        <div class="footbtns">
            <a-button class="deleteBtn" @click="showEditCancel">取消 </a-button>
            <a-button
                type="primary"
                @click="createVideoHandle"
                class="deleteBtn deleteBtn1"
                >制作视频
            </a-button>
        </div>
    </a-modal>
</template>

<script lang="ts" setup="props">
import { ref, onMounted, nextTick } from "vue";
import { message } from "ant-design-vue";
import { getTpls } from "@/utils/api-utils";
const uncheck = new URL("../../assets/img/live/unsle.png", import.meta.url)
    .href;
const checked = new URL("../../assets/img/live/sle.png", import.meta.url).href;
const createVideoVisible = ref(false);
const subMsg = ref<any>({ type: "2", title: "", muban: [] });
const motalList = ref<any>([]);
const zzList = ref<any>([]);
const selectedNum = ref<any>([]);
const props = defineProps({
    choosePdList: {
        type: Array as any,
        default: () => {},
    },
    liveId: {
        type: String,
        default: "",
    },
});
onMounted(() => {});
const showVideoMotal = (item: any) => {
    getMuban();
    createVideoVisible.value = true;
};
const chooseVideo = (row: any) => {
    console.log(row);
    const index = zzList.value.findIndex((item: any) => {
        return item.id === row.id;
    });
    if (index < 0) {
        zzList.value = [...zzList.value, ...[row]];
        selectedNum.value = [...selectedNum.value, ...[row.id]];
        console.log(selectedNum.value);
    } else {
        zzList.value.splice(index, 1);
        selectedNum.value.splice(index, 1);
    }
    // msgDatas.value.resources.push(row);
};
const getMuban = () => {
    getTpls()
        .then((res: any) => {
            console.log("模板列表");
            console.log(res);
            motalList.value = [...res];
        })
        .catch((err) => {
            console.log(err);
        });
};

const showEditCancel = () => {
    createVideoVisible.value = false;
    zzList.value = [];
    selectedNum.value = [];
};
const choosed = (type: string) => {
    subMsg.value.type = type;
};
const createVideoHandle = () => {
    console.log("这里进行视频制作提交");
    console.log(zzList.value);
    console.log(props.liveId);
};
//子组件要暴露出来父组件才能调用
defineExpose({
    showVideoMotal,
});
</script>
<style>
.motalsGroupBox .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: 760px;
    border-radius: 16px;
    overflow: hidden;
}
.motalsGroupBox .ant-modal-header {
    background: #fbfbfc;
    text-align: left;
}
.motalsGroupBox .ant-modal-header .ant-modal-title {
    font-size: 18px;
}
</style>
<style lang="scss" scoped>
.motalContent1 {
    height: 600px;
    position: relative;
    overflow: hidden;
}

.footbtns {
    width: 100%;
    height: 40px;
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}
.deleteBtn {
    width: 128px;
    height: 40px;
    border-radius: 22px;
    border: 1px solid #c0c4cc;
}
.deleteBtn1 {
    background: linear-gradient(90deg, #0eb6ff 0%, #0d73ff 51%, #6f78ff 100%);
    border-radius: 22px;
    margin-left: 16px;
}

/*示例*/
.ps {
    height: 472px;
    padding: 0;
    width: 100%;
}
.rowItem {
    width: 100%;
    display: flex;

    margin-bottom: 20px;
}
.acter {
    align-items: center;
}
.leftItem {
    font-size: 14px;
    font-family: AlibabaPuHuiTi_2_55_Regular;
    width: 100px;
    color: #606266;
    span {
        color: #ee292f;
    }
}
.rightItem {
    display: flex;
    flex: 1;
    .items {
        width: 96px;
        height: 40px;
        background: #ffffff;
        border-radius: 22px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        margin-right: 16px;
        cursor: pointer;
        font-size: 14px;
        font-family: AlibabaPuHuiTi_2_55_Regular;
        color: rgba(144, 147, 153, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            width: 12px;
            height: 12px;
            margin-right: 4px;
        }
    }
    .itemsed {
        color: #303133;
        border: 1px solid rgba(13, 134, 255, 0.7);
    }
}
.motalContent {
    display: grid;
    grid-template-columns: repeat(auto-fill, 122px);
    /* 设置间距 */
    grid-gap: 20px;
    box-sizing: border-box;

    .item {
        width: 122px;
        height: 216px;
        display: flex;
        position: relative;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        margin-bottom: 20px;
        border: 4px solid #fff;
        border-radius: 12px;

        .titlesd {
            width: 100%;
            background: linear-gradient(
                180deg,
                rgba(0, 0, 0, 0) 0%,
                #000000 100%
            );
            border-radius: 0px 0px 8px 8px;
            position: absolute;
            font-size: 12px;
            padding: 14px 6px 6px;
            box-sizing: border-box;
            line-height: 15px;
            font-family: AlibabaPuHuiTi_2_65_Medium;
            color: #ffffff;
            bottom: 0px;
            text-align: center;
        }
        .bianjiBox {
            position: absolute;
            width: 34px;
            height: 34px;
            right: 0;
            bottom: 0;

            opacity: 0;
        }
    }

    .itemSelected {
        position: relative;
        border: 4px solid #67c23a;
        background-color: #67c23a;
        box-shadow: 0px 8px 20px 0px #ebeef5;
        .titlesd {
            color: #67c23a;
        }
    }
    .item:hover {
        box-shadow: 0px 4px 16px 0px #c0c4cc;
        .bianjiBox {
            opacity: 1;
        }
    }

    .imgIcon {
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }
}
.itemSelected .seletced {
    width: 34px;
    height: 34px;
    position: absolute;
    left: 0;
    top: 0;
}
.inputs {
    width: 100%;
    height: 40px;
    border-radius: 22px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding-left: 12px;
    font-size: 14px;
}
</style>
@/utils/api-utils